/* CSS波浪效果 */
.rippleComponent {
    .ripple {
        height: 1px;

        .waves {
            position: relative;
            width: 100%;
            height: 15%;
            margin-bottom: -7px;
            min-height: 80px;
            max-height: 150px;
            transform: translateY(-100%);
            z-index: 2;
        }

        /* Animation */
        .parallax>use {
            animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
            transition: all 0.3s;
        }

        .parallax>use:nth-child(1) {
            animation-delay: -2s;
            animation-duration: 7s;
        }

        .parallax>use:nth-child(2) {
            animation-delay: -3s;
            animation-duration: 10s;
        }

        .parallax>use:nth-child(3) {
            animation-delay: -4s;
            animation-duration: 13s;
        }

        .parallax>use:nth-child(4) {
            animation-delay: -5s;
            animation-duration: 20s;
        }

        @keyframes move-forever {
            0% {
                transform: translate3d(-90px, 0, 0);
            }

            100% {
                transform: translate3d(85px, 0, 0);
            }
        }

        /*适配移动端*/
        @media (max-width: 768px) {
            .waves {
                height: 40px;
                min-height: 40px;
            }

            h1 {
                font-size: 24px;
            }
        }
    }
}